<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Book Ranking</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            width: 60%;
            margin: 0 auto;
        }
        .book-ranking {
            margin-top: 20px;
        }
        .book-item {
            border: 1px solid #ddd;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
        }
        .book-title {
            font-size: 18px;
            font-weight: bold;
        }
        .book-rating {
            color: #f39c12;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Book Ranking</h1>
    <label for="userId">Enter User ID: </label>
    <input type="number" id="userId" placeholder="User ID">
    <button onclick="fetchRanking()">Get Ranking</button>

    <div class="book-ranking" id="bookRanking"></div>
</div>

<script>
    // Fetch ranking by userId
    function fetchRanking() {
        const userId = $('#userId').val();
        if (!userId) {
            alert("输入的ID不正确，请重新输入");
            return;
        }

        $.ajax({
            url: `http://127.0.0.1:10086/api/ranking/${userId}`,  // 调用本地接口
            method: 'GET',
            success: function(data) {
                displayRanking(data);
            },
            error: function() {
                alert("ID检索异常，请重试");
            }
        });
    }

    // Display the ranking data
    function displayRanking(data) {
        const rankingContainer = $('#bookRanking');
        rankingContainer.empty(); // Clear previous ranking

        if (data.length === 0) {
            rankingContainer.append("<p>No ranking data available.</p>");
            return;
        }

        data.forEach(function(book) {
            const bookItem = `
                    <div class="book-item">
                        <div class="book-title">${book.title}</div>
                        <div class="book-rating">Rating: ${book.rating}</div>
                    </div>
                `;
            rankingContainer.append(bookItem);
        });
    }
</script>

</body>
</html>
